<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="new :: common_head(${deviceType.typeName})">
</head>
<style>
    .mylabel{
        display: inline;
    }
    .greenColor{
        color:green;
    }
    .redColor{
        color:red;
    }
</style>
<body>
<!--删除提示模态框-->
<div class="modal fade" id="delcfmModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">是否要删除？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="deleteProperty()">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!--删除提示模态框结束-->
<!-- start: Header -->
<div th:replace="~{new::header}"></div>
<!-- start: Header -->

<div class="container-fluid-full">
    <div class="row-fluid">

        <!-- start: Main Menu -->
        <div id="sidebar-left" class="span2" th:replace="new::sidebar_left"></div>
        <!-- end: Main Menu -->

        <noscript>
            <div class="alert alert-block span10">
                <h4 class="alert-heading">Warning!</h4>
                <p>You need to have <a href="" target="_blank">JavaScript</a> enabled to use this site.</p>
            </div>
        </noscript>

        <!-- start: Content -->
        <div id="content" class="span10">


            <ul class="breadcrumb">
                <li>
                    <i class="icon-home"></i>
                    <a th:href="@{/new.html}">主页</a>
                    <i class="icon-angle-right"></i>
                </li>
                <li><a href="#">[[${deviceType.typeName}]]</a></li>
            </ul>

            <div class="row-fluid sortable">
                <div class="box span12">
                    <div class="box-header" data-original-title>
                        <h2><i class="halflings-icon white edit"></i><span class="break"></span>添加[[${deviceType.typeName}]]</h2>
                    </div>
                    <div class="box-content">
                        <!--<form class="form-horizontal"  th:action="@{/device/addDevice}" method="post">-->
                            <form id="form1" class="form-horizontal" enctype="multipart/form-data"  method="post">
                            <input type="hidden" id="typeId" name="type_id" th:value="${deviceType.typeId}">
                            <fieldset>
                                <div class="control-group">
                                    <label class="control-label">设备名</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="text" placeholder=""
                                               name="deviceName" onchange="checkName()" required="required" id="deviceName">
                                        <div style="display: inline" id="checkName">
                                        </div>
                                        <span style="color:red;font-size: 20px" >*</span>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">能量编码</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="text" placeholder=""
                                               name="devCode"  required="required" id="devCode">
                                        <span style="color:red;font-size: 20px" >*</span>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">电量编码</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="text" placeholder=""
                                               name="batteryCode"  required="required" id="batteryCode">
                                        <span style="color:red;font-size: 20px" >*</span>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">内温编码</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="text" placeholder=""
                                               name="temperatureCode"  required="required" id="temperatureCode">
                                        <span style="color:red;font-size: 20px" >*</span>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">所属图谱</label>
                                    <div class="controls">
                                        <select id="graph" class="select" name="graphId">
                                            <option th:each="graph,graphStat:${graphList}" name="graphId" th:value="${graph.graphId}" th:text="${graph.graphName}"></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group" th:if="${deviceType.typeId==3}">
                                    <label class="control-label">是否纳入决策</label>
                                    <div class="controls">
                                        <label class="radio" ><input  name="isPredicted" type="radio" value="1">是</label>
                                        <div style="clear:both"></div>
                                        <label class="radio"><input  name="isPredicted" checked="checked" type="radio" value="0">否</label>
                                    </div>
                                </div>
                                <div class="control-group" >
                                    <label class="control-label">是否显示在图谱上</label>
                                    <div class="controls">
                                        <label class="radio" ><input  name="isInGraph"  type="radio" value="1">是</label>
                                        <div style="clear:both"></div>
                                        <label class="radio"><input  name="isInGraph" checked="checked" type="radio" value="0">否</label>
                                    </div>
                                </div>
                                <div class="control-group" >
                                    <label class="control-label">平均每小时产能量</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="number" placeholder=""
                                               name="power" id="power" required="required">
                                        <span style="font-size: 20px" >kW</span>
                                        <span style="color:red;font-size: 20px" >*</span>
                                    </div>
                                </div>
                                <div class="control-group" >
                                    <label class="control-label">能效比</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="number" placeholder=""
                                               name="conversionRate"  required="required" id="conversionRate">
                                        <span style="color:red;font-size: 20px">*</span>
                                    </div>
                                </div>
                                <!--<div class="control-group" th:if="${deviceType.typeId!=3}">-->
                                    <!--<label class="control-label">关联设备</label>-->
                                    <!--<div class="controls">-->
                                        <!--<select id="relDevice" class="select" name="relationDevice">-->
                                            <!--<option value="" name="relationDevice"></option>-->
                                        <!--</select>-->
                                        <!--<label class="mylabel" >损耗率:</label>-->
                                        <!--<input class="input-small focused" type="number" placeholder=""-->
                                               <!--name="lossRate">-->
                                        <!--<label class="mylabel" >能源属性:</label>-->
                                        <!--<select id="property" class="select" name="energyTypeId">-->
                                            <!--<option value="" name="energyTypeId"></option>-->
                                        <!--</select>-->
                                        <!--<input type="button" onclick="addRelation()" id="addRel" value="+">-->
                                        <!--&lt;!&ndash;<button type="button" onclick="addRelation()">+</button>&ndash;&gt;-->
                                    <!--</div>-->
                                <!--</div>-->
                                <div class="control-group">
                                    <label class="control-label">上限</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="number" placeholder=""
                                               name="cap" id="cap" required="required">
                                        <span style="font-size: 20px" >kWh</span>
                                        <span style="color:red;font-size: 20px" >*</span>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">设备开启时间</label>
                                    <div class="controls">
                                        <!--<input class="input-xlarge focused" type="text" placeholder=""-->
                                               <!--name="cap" id="cap">-->
                                        <select name="time" id="timeStart">
                                            <option value="0">0:00</option>
                                            <option value="1">1:00</option>
                                            <option value="2">2:00</option>
                                            <option value="3">3:00</option>
                                            <option value="4">4:00</option>
                                            <option value="5">5:00</option>
                                            <option value="6">6:00</option>
                                            <option value="7">7:00</option>
                                            <option value="8">8:00</option>
                                            <option value="9">9:00</option>
                                            <option value="10">10:00</option>
                                            <option value="11">11:00</option>
                                            <option value="12">12:00</option>
                                            <option value="13">13:00</option>
                                            <option value="14">14:00</option>
                                            <option value="15">15:00</option>
                                            <option value="16">16:00</option>
                                            <option value="17">17:00</option>
                                            <option value="18">18:00</option>
                                            <option value="19">19:00</option>
                                            <option value="20">20:00</option>
                                            <option value="21">21:00</option>
                                            <option value="22">22:00</option>
                                            <option value="23">23:00</option>
                                        </select >
                                        <span>至</span>
                                        <select name="time" id="timeEnd" >
                                            <option value="0">0:00</option>
                                            <option value="1">1:00</option>
                                            <option value="2">2:00</option>
                                            <option value="3">3:00</option>
                                            <option value="4">4:00</option>
                                            <option value="5">5:00</option>
                                            <option value="6">6:00</option>
                                            <option value="7">7:00</option>
                                            <option value="8">8:00</option>
                                            <option value="9">9:00</option>
                                            <option value="10">10:00</option>
                                            <option value="11">11:00</option>
                                            <option value="12">12:00</option>
                                            <option value="13">13:00</option>
                                            <option value="14">14:00</option>
                                            <option value="15">15:00</option>
                                            <option value="16">16:00</option>
                                            <option value="17">17:00</option>
                                            <option value="18">18:00</option>
                                            <option value="19">19:00</option>
                                            <option value="20">20:00</option>
                                            <option value="21">21:00</option>
                                            <option value="22">22:00</option>
                                            <option value="23">23:00</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">X坐标</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="number" placeholder=""
                                               name="xCoordinates" id="x">
                                        <span style="color:red;font-size: 20px" >*</span>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">Y坐标</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="number" placeholder=""
                                               name="yCoordinates" id="y">
                                        <span style="color:red;font-size: 20px" >*</span>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">设备图片</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="file" id="pic" accept="image/jpg,image/jpeg,image/png,image/PNG" placeholder=""
                                             name="pic" >
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">高亮图片</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" accept="image/jpg,image/jpeg,image/png,image/PNG" type="file" placeholder=""
                                             id="highlightPic"  name="pic" >
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button type="submit" class="btn btn-primary" onclick="toAdd();return false">提交</button>
                                    <button  type="button" class="btn btn-primary" onclick="toDevice()">返回</button>
                                    <button type="button" class="btn btn-primary" id="addAttr" onclick="addProperty()">添加属性</button>
                                </div>
                            </fieldset>
                        </form>

                    </div>
                </div><!--/span-->

            </div><!--/row-->
        </div>
    </div>
</div>

<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Settings</h3>
    </div>
    <div class="modal-body">
        <p>Here settings can be configured...</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>
<div class="common-modal modal fade" id="common-Modal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <ul class="list-inline item-details">
            <li><a href="http://sc.chinaz.com">Admin templates</a></li>
            <li><a href="http://sc.chinaz.com">Bootstrap themes</a></li>
        </ul>
    </div>
</div>
<div class="clearfix"></div>


<div th:replace="new::common_js"></div>
<script type="text/javascript">
 //返回上一页
 function toDevice(){
     window.history.back(-1);
 }
 //添加设备
  function toAdd(){
     var formData=new FormData($("#form1")[0]); //获取form表单，使用FormData数据格式
     var typeId=document.getElementById("typeId");//设备id
     var typeIdValue=typeId.value;
     var start=document.getElementById("timeStart");//设备开启时间
     var end=document.getElementById("timeEnd");//设备结束时间
     var startTime=Number(start.value);
     var endTime=Number(end.value);
     var deviceName=document.getElementById("deviceName");//设备名称
     var power=document.getElementById("power"); //平均每小时产能
     var devCode=document.getElementById("devCode"); //设备编号
      var conversionRate=document.getElementById("conversionRate");//能效比
      var cap=document.getElementById("cap"); //上限
      var x=document.getElementById("x");  //x坐标，(用于图谱显示)
      var y=document.getElementById("y"); //y坐标,(用于图谱显示)
      var pic = $('#pic').get(0).files[0]; //设备图片
      var highPic = $('#highlightPic').get(0).files[0];  //设备高亮图片


      if(deviceName.value==""){
         layer.alert('设备名不能为空', {

             icon: 5,

             title: "提示"

         });return false;
      }
      if(devCode.value==""){
          layer.alert('设备编号不能为空', {

              icon: 5,

              title: "提示"

          });return false;
      }
      if(power.value==""){
          layer.alert('功率不能为空', {

              icon: 5,

              title: "提示"

          });return false;
      }
      if(conversionRate.value==""){
          layer.alert('能效比不能为空', {

              icon: 5,

              title: "提示"

          });return false;
      }
      if(cap.value==""){
          layer.alert('上限不能为空', {

              icon: 5,

              title: "提示"

          });return false;
      }
      if(x.value==""){
          layer.alert('X坐标不能为空', {

              icon: 5,

              title: "提示"

          });return false;
      }
      if(y.value==""){
          layer.alert('Y坐标不能为空', {

              icon: 5,

              title: "提示"

          });return false;
      }
      if(addCheckName==false){
         layer.alert('请输入未被使用的设备名', {

             icon: 5,

             title: "提示"

         });return false;
     }
      if((startTime-endTime)>=0){
          layer.alert('请输入合理的时间段', {

              icon: 5,

              title: "提示"

          });return false;
      }
      if(!pic){
          layer.alert('设备图片不能为空', {

              icon: 5,

              title: "提示"

          });
          return false;
      }
      if(!highPic){
          layer.alert('高亮图片不能为空', {

              icon: 5,

              title: "提示"

          });
          return false;
      }
      //  var  mydata = document.getElementById("pic").files[0];
      //  var mydata1=document.getElementById("highlightPic").files[0];
      // var  formData = new FormData();
      // formData.append("pic", mydata);
      // formData.append("highlightPic",mydata1);
      $.ajax({
          type: "POST",
          data:formData,
          url: "/power/device/addDevice",
          processData:false,
          contentType:false,
          success: function(data) {
            console.log("成功");
              if(addCheckName==true) {
                  window.location.href = "/power/device/" + typeIdValue;
              }
          },
      })
  }
  function checkName(){
     var deviceName=$("#deviceName").val(); //设备名
     console.log(deviceName);
      $.ajax({
          type: "GET",
          data:{deviceName:deviceName},
          url: "/power/device/check",
          success: function(data) {
              console.log(data.check);
              if(data.check=="yes"){  //设备名可以使用
                  var span=document.createElement("span");
                  span.setAttribute("class","greenColor");
                  span.innerHTML="该设备名可以使用";
                  $("#checkName").html(span);
                  addCheckName=true;
              }
              if(data.check=="no"){ //设备名已存在
                  var span=document.createElement("span");
                  span.setAttribute("class","redColor");
                  span.innerHTML="该设备名已存在，请使用其他设备名";
                  $("#checkName").html(span);
                  addCheckName=false;
              }
          },
      })
  }
</script>
</body>
</html>
